<template>
    <div class="student-info">
        <h4>个人信息</h4>
        <div class="info-row">
            <label for="name" class="info-label">身份:</label>
            <input type="text" id="name" class="info-input" value="宿舍管理员" disabled/>
        </div>
        <div class="info-row">
            <label for="name" class="info-label">姓名:</label>
            <input type="text" id="name" class="info-input" v-model="name" disabled/>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';

const store = useStore();
const name = ref("");

const getInfo = () => {
    $.ajax({
        url: "http://localhost:3000/api/dormaddmin/getinfo",
        type: "GET",
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                name.value = resp.name;
            } else {
                console.log(resp.error_message);
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}
getInfo();

</script>

<style scoped>
.student-info {
    display: flex; 
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 100%;
}

.info-row {
    display: flex;
    align-items: center; /* 确保 label 和 input 垂直居中 */
    justify-content: center;
    gap: 15px;
}

.info-label {
    font-weight: bold;
    width: 80px;
    text-align: right;
}

.info-input {
    flex: 1;
    max-width: 250px; /* 限制输入框最大宽度 */
    padding: 10px; /* 增加内边距使其更美观 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}
</style>
